<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统仪表盘 - 实验室辅助管理系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/fontawesome-local.css}">
    <style>
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-card.primary {
            background: linear-gradient(135deg, #4285f4, #34a853);
            color: white;
        }

        .stat-card.warning {
            background: linear-gradient(135deg, #fbbc04, #ea4335);
            color: white;
        }

        .stat-card.success {
            background: linear-gradient(135deg, #34a853, #4285f4);
            color: white;
        }

        .stat-card.danger {
            background: linear-gradient(135deg, #ea4335, #fbbc04);
            color: white;
        }

        .stat-header {
            font-size: 18px;
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .stat-value {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-icon {
            font-size: 48px;
            float: right;
            opacity: 0.3;
            margin-top: -10px;
        }

        .recent-records {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .recent-records-header {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
        }

        .recent-records-body {
            padding: 0;
        }

        .record-item {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #f1f3f4;
            transition: background-color 0.3s ease;
        }

        .record-item:hover {
            background-color: #f8f9ff;
        }

        .record-item:last-child {
            border-bottom: none;
        }

        .record-info {
            flex: 1;
        }

        .record-lab {
            font-weight: 600;
            color: #1a73e8;
            margin-bottom: 4px;
        }

        .record-details {
            font-size: 14px;
            color: #666;
        }

        .record-status {
            margin-left: 15px;
        }

        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-normal {
            background-color: #e6f4ea;
            color: #34a853;
        }

        .status-abnormal {
            background-color: #fce8e6;
            color: #ea4335;
        }

        .status-handled {
            background-color: #e8f0fe;
            color: #1a73e8;
        }

        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }

        .quick-action {
            background: white;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            text-decoration: none;
            color: #333;
            transition: all 0.3s ease;
        }

        .quick-action:hover {
            border-color: #1a73e8;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(26, 115, 232, 0.15);
            text-decoration: none;
            color: #1a73e8;
        }

        .quick-action i {
            font-size: 32px;
            margin-bottom: 10px;
            display: block;
        }

        .welcome-section {
            background: linear-gradient(135deg, #1a73e8, #0d47a1);
            color: white;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 30px;
            text-align: center;
        }

        .welcome-title {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .welcome-subtitle {
            opacity: 0.9;
            font-size: 16px;
        }

        /* 消息提示样式 */
        .message-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            max-width: 400px;
        }

        .message {
            background: white;
            border-radius: 8px;
            padding: 16px 20px;
            margin-bottom: 10px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            border-left: 4px solid #67C23A;
            display: flex;
            align-items: center;
            gap: 12px;
            transform: translateX(100%);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            animation: slideIn 0.3s ease-out forwards;
        }

        .message.success {
            border-left-color: #67C23A;
        }

        .message.error {
            border-left-color: #F56C6C;
        }

        .message.warning {
            border-left-color: #E6A23C;
        }

        .message.info {
            border-left-color: #409EFF;
        }

        .message-icon {
            font-size: 18px;
            flex-shrink: 0;
        }

        .message.success .message-icon {
            color: #67C23A;
        }

        .message.error .message-icon {
            color: #F56C6C;
        }

        .message.warning .message-icon {
            color: #E6A23C;
        }

        .message.info .message-icon {
            color: #409EFF;
        }

        .message-content {
            flex: 1;
            font-size: 14px;
            color: #303133;
            line-height: 1.4;
        }

        .message-close {
            font-size: 16px;
            color: #C0C4CC;
            cursor: pointer;
            flex-shrink: 0;
            transition: color 0.3s ease;
        }

        .message-close:hover {
            color: #909399;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        .message.hiding {
            animation: slideOut 0.3s ease-in forwards;
        }
    </style>
</head>
<body>
    <!-- 消息提示容器 -->
    <div class="message-container" id="messageContainer"></div>

    <div class="management-container">
        <!-- 侧边栏 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <h2><i class="fas fa-tachometer-alt"></i> 系统仪表盘</h2>
            </div>
            <ul class="nav-menu">
                <li class="active"><a th:href="@{/dashboard}"><i class="fas fa-tachometer-alt"></i>系统仪表盘</a></li>
                <li><a th:href="@{/college-management}"><i class="fas fa-university"></i> 学院管理</a></li>
                <li><a th:href="@{/term-management}"><i class="fas fa-calendar-alt"></i> 学期管理</a></li>
                <li><a th:href="@{/laboratory-management}"><i class="fas fa-microscope"></i> 实验室管理</a></li>
                <li><a th:href="@{/user-management}"><i class="fas fa-users"></i> 用户管理</a></li>
                <li><a th:href="@{/assignment-management}"><i class="fas fa-user-cog"></i> 管理员分配</a></li>
            </ul>
        </nav>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部栏 -->
            <header class="top-bar">
                <div class="top-bar-left">
                    <h1>系统仪表盘</h1>
                </div>
                <div class="top-bar-right">
                    <div class="user-info">
                        <span th:text="${currentUser.name}">管理员</span>
                        <a th:href="@{/logout}" class="logout-btn">退出</a>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 欢迎区域 -->
                <div class="welcome-section">
                    <h1 class="welcome-title">欢迎回来，<span th:text="${currentUser.name}">管理员</span>！</h1>
                    <p class="welcome-subtitle">实验室辅助管理系统 - 让实验室安全管理更简单高效</p>
                </div>

                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card primary">
                        <div class="stat-header">学院数量</div>
                        <div class="stat-value" th:text="${statistics.collegeCount}">8</div>
                        <i class="fas fa-university stat-icon"></i>
                    </div>
                    <div class="stat-card warning">
                        <div class="stat-header">实验室数量</div>
                        <div class="stat-value" th:text="${statistics.labCount}">42</div>
                        <i class="fas fa-microscope stat-icon"></i>
                    </div>
                    <div class="stat-card success">
                        <div class="stat-header">管理员数量</div>
                        <div class="stat-value" th:text="${statistics.managerCount}">15</div>
                        <i class="fas fa-users stat-icon"></i>
                    </div>
                    <div class="stat-card danger">
                        <div class="stat-header">今日检查记录</div>
                        <div class="stat-value" th:text="${statistics.todayCheckCount}">23</div>
                        <i class="fas fa-clipboard-check stat-icon"></i>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="card">
                    <div class="card-header">
                        <h3><i class="fas fa-bolt"></i> 快速操作</h3>
                    </div>
                    <div class="card-body">
                        <div class="quick-actions">
                            <a th:href="@{/college-management}" class="quick-action">
                                <i class="fas fa-university"></i>
                                <div>学院管理</div>
                            </a>
                            <a th:href="@{/laboratory-management}" class="quick-action">
                                <i class="fas fa-microscope"></i>
                                <div>实验室管理</div>
                            </a>
                            <a th:href="@{/user-management}" class="quick-action">
                                <i class="fas fa-users"></i>
                                <div>用户管理</div>
                            </a>
                            <a th:href="@{/assignment-management}" class="quick-action">
                                <i class="fas fa-user-cog"></i>
                                <div>管理员分配</div>
                            </a>
                            <a th:href="@{/term-management}" class="quick-action">
                                <i class="fas fa-calendar-alt"></i>
                                <div>学期管理</div>
                            </a>
                            <a th:href="@{/}" class="quick-action">
                                <i class="fas fa-clipboard-check"></i>
                                <div>安全检查</div>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 最近安全检查记录 -->
                <div class="recent-records">
                    <div class="recent-records-header">
                        <h3><i class="fas fa-history"></i> 最近安全检查记录</h3>
                    </div>
                    <div class="recent-records-body">
                        <div th:if="${recentRecords != null and !recentRecords.isEmpty()}">
                            <div th:each="record : ${recentRecords}" class="record-item">
                                <div class="record-info">
                                    <div class="record-lab" th:text="${record.laboratory.name}">物理实验室 A101</div>
                                    <div class="record-details">
                                        <span th:text="${#temporals.format(record.checkDate, 'yyyy-MM-dd HH:mm')}">2023-10-15 09:30</span>
                                        · 检查人员: <span th:text="${record.checkerName}">张老师</span>
                                    </div>
                                </div>
                                <div class="record-status">
                                    <span th:class="'status-badge ' + (${record.overallStatus == 'NORMAL'} ? 'status-normal' : (${record.overallStatus == 'ABNORMAL'} ? 'status-abnormal' : 'status-handled'))"
                                          th:text="${record.overallStatus == 'NORMAL' ? '正常' : (record.overallStatus == 'ABNORMAL' ? '异常上报' : '已处理')}">正常</span>
                                </div>
                            </div>
                        </div>
                        <div th:if="${recentRecords == null or recentRecords.isEmpty()}" class="record-item">
                            <div class="record-info" style="text-align: center; color: #666; font-style: italic;">
                                暂无最近的安全检查记录
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script th:src="@{/js/app.js}"></script>
    <script>
        // 消息提示功能
        function showMessage(message, type = 'success', duration = 3000) {
            const container = document.getElementById('messageContainer');
            const messageEl = document.createElement('div');
            messageEl.className = `message ${type}`;
            
            let iconClass = '';
            switch (type) {
                case 'success':
                    iconClass = 'fas fa-check-circle';
                    break;
                case 'error':
                    iconClass = 'fas fa-times-circle';
                    break;
                case 'warning':
                    iconClass = 'fas fa-exclamation-triangle';
                    break;
                case 'info':
                    iconClass = 'fas fa-info-circle';
                    break;
                default:
                    iconClass = 'fas fa-check-circle';
            }
            
            messageEl.innerHTML = `
                <i class="message-icon ${iconClass}"></i>
                <div class="message-content">${message}</div>
                <i class="message-close fas fa-times"></i>
            `;
            
            container.appendChild(messageEl);
            
            // 点击关闭按钮
            messageEl.querySelector('.message-close').addEventListener('click', function() {
                hideMessage(messageEl);
            });
            
            // 自动关闭
            if (duration > 0) {
                setTimeout(() => {
                    hideMessage(messageEl);
                }, duration);
            }
        }
        
        function hideMessage(messageEl) {
            messageEl.classList.add('hiding');
            setTimeout(() => {
                if (messageEl.parentNode) {
                    messageEl.parentNode.removeChild(messageEl);
                }
            }, 300);
        }
        
        // 检查URL参数显示登录成功消息
        document.addEventListener('DOMContentLoaded', function() {
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('loginSuccess')) {
                showMessage('登录成功！欢迎使用管理员仪表盘', 'success', 4000);
                // 清除URL参数
                const newUrl = window.location.pathname;
                window.history.replaceState({}, document.title, newUrl);
            }
        });
    </script>
</body>
</html> 